<template>
  <el-card shadow="never" :body-style="{ padding: '0px' }">
    <template #header>
      <div class="flex_between">
        <span>项目</span>
        <span class="more">更多</span>
      </div>
    </template>

    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="item in list" :key="item">
        <el-card shadow="hover" style="margin-bottom: 0px; border-radius: 0px">
          <div class="card_header">
            <el-icon :color="item.color" style="font-size: 30px">
              <component :is="item.icon" />
            </el-icon>
            <span class="card_header_title">{{ item.title }}</span>
          </div>

          <div class="card_center">{{ item.desc }}</div>

          <div class="card_footer">
            <span>{{ item.group }}</span>
            <span>{{ item.date }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const list = [
      {
        title: 'Github',
        icon: 'niu-icon-GitHub',
        color: '',
        desc: '不要等待机会，而要创造机会。',
        group: '开源组',
        date: '2021-04-01'
      },
      {
        title: 'Vue',
        icon: 'niu-icon-Vue',
        color: '#3fb27f',
        desc: '现在的你决定将来的你。',
        group: '算法组',
        date: '2021-04-01'
      },
      {
        title: 'Html5',
        icon: 'niu-icon-Html5',
        color: '#e18525',
        desc: '没有什么才能比努力更重要。',
        group: '上班摸鱼',
        date: '2021-04-01'
      },
      {
        title: 'Angular',
        icon: 'niu-icon-Angular',
        color: '#bf0c2c',
        desc: '热情和欲望可以突破一切难关。',
        group: 'UI',
        date: '2021-04-01'
      },
      {
        title: 'React',
        icon: 'niu-icon-React',
        color: '#00d8ff',
        desc: '健康的身体是实目标的基石。',
        group: '技术牛',
        date: '2021-04-01'
      },
      {
        title: 'Js',
        icon: 'niu-icon-Js',
        color: '#4daf1bc9',
        desc: '路是走出来的，而不是空想出来的。',
        group: '架构组',
        date: '2021-04-01'
      }
    ]

    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .more {
    font-weight: normal;
    color: var(--el-color-primary);
    cursor: pointer;
  }
}

.card_header {
  display: flex;
  align-items: center;

  .card_header_title {
    font-size: 18px;
    line-height: 28px;
    margin-left: 16px;
  }
}

.card_center {
  font-size: 14px;
  height: 40px;
  color: #00000073;
  margin-top: 8px;
}

.card_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #00000073;
}
</style>
